<template>
    <!--仪表盘-->
   <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <div id='dashborad'>
        <el-container class="container animated">
            <el-header class="dash-top" >
                <div class="d-t-float" v-for='(item,index) in titleArr' @click="titleInit" :key="index">
                    <loading v-if='loadingb'></loading>
                    <div v-else='loadingb'>
                        <span class="dtf-l fl">
                       <!--  <span  v-text="item.url"></span> -->
                        <img v-bind:src='item.url' alt="">
                        
                        </span>
                        <span class="fl span1">
                            <div v-text="item.name"></div>
                            <div v-text="item.cs"></div>
                        </span>
                    </div>
                </div>
            </el-header>
            <el-main class="main">
                <div class="main-top">
                    <!-- 渠道注册情况 -->
                    <!-- <el-card class="main-top-left" id="myChart"  @click="drawLine">
                            <loading v-show='loading'></loading>
                    </el-card>  -->
                    <div class="main-top-left" id="myChart"  @click="drawLine" >
                        <loading v-show='loading'></loading>
                    </div>
                    <el-card shadow="always" class="main-top-left" v-show="shownull">
                        <el-alert
                            class="mr40"
                            title="渠道注册情况"
                            :closable="false"
                            center
                            type="success"
                            show-icon>
                          </el-alert>
                         <el-alert
                            class="text-line"
                            title="暂无数据"
                            type="success"
                            center
                            :closable="false"
                            >   
                        </el-alert>
                    </el-card>
                    
                       
                    <!--  新借/复借情况 -->
                    <div class="main-top-right"  id="myChart1" @click="drawLine1" >
                       <loading v-show='loadingc'></loading>
                    </div>
                     <el-card shadow="always" class="main-top-left mr10" v-show="shownull1">
                        <el-alert
                            class="mr40"
                            title="新增/复借情况"
                            :closable="false"
                            center
                            type="success"
                            show-icon>
                          </el-alert>
                         <el-alert
                            class="text-line"
                            title="暂无数据"
                            type="success"
                            center
                            :closable="false"
                            >
                        </el-alert>
                    </el-card>
                </div>
                <div class="main-b"  id="myChart2" @click="drawLine2">
                    <loading v-show='loadingd'></loading>
                </div>
                <el-card shadow="always" class="main-b" v-show="shownull2" style="height:400px;">
                    <el-alert
                        class="mr40"
                        title="首逾/逾期7天/逾期15天"
                        :closable="false"
                        center
                        type="success"
                        show-icon>
                      </el-alert>
                     <el-alert
                        class="text-line"
                        style="left:44%;"
                        title="暂无数据"
                        type="success"
                        center
                        :closable="false"
                        >
                    </el-alert>
                </el-card>
            </el-main>
        </el-container>
        
    </div>
</transition>
</template>
<script>
 let echarts = require('echarts/lib/echarts');
 import {  option2 , option3} from "../echarts/option.js"
import { dashBoardApi  } from '../api/api'
export default{
    data(){
        return{
             myChart: null, 
             myChart1:null,
             myChart2:null,
             shownull:false,
             shownull1:false,
             shownull2:false,
             xAxisData:[],
             seriesData:[],
             loading:false,
             loadingc:false,
             loadingb:false,
             loadingd:false,
             titleArr:[],
             imgArr:[require("../images/today.png"),
                    require("../images/apply.png"),
                    require("../images/overduenum.png"),
                    require("../images/auditnum.png"),
                    require("../images/certified.png"),],
            titTime:"",
            newlendList:[],
            newlendListNum:[],
            newlendListTime:[],
            oldlendList:[],
            oldlendListNum:[],
            oldlendListTime:[],
            dataTime:[],
            lendTimeStr:"",
            filstListArr:[],
            filstListMsg:[],
            filstListDate:[],
            overduetime:"",
            oversevenList:[],
            fifListMsg:[],
            fifListDate:[],
            overthirtyList:[],
            thirtyListMsg:[],
            thirtyListDate:[],
            secondData:"",
            legendData:"",

        }
    },
    mounted(){
            this.myChart = echarts.init(document.getElementById('myChart'),null,{
                height: 400,
            });
            this.apichanle();
            this.myChart1 = echarts.init(document.getElementById('myChart1'),null,{
                height: 400,
            })
            this.drawLine1();

            this.myChart2 = echarts.init(document.getElementById('myChart2'),null,{
                height: 400,
            })
            this.drawLine2();
    },
    methods:{
        drawLine () {  
           
                if(this.datearr!=""){
                    if((new Date().getTime())-this.datearr>1000){
                        this.apichanle()
                    }
                }
                

        },
        apichanle(){
            this.datearr=new Date().getTime()
            if(this.myChart){
                this.myChart.clear();
            }
            //this.myChart.clear();
            this.loading=true;
            dashBoardApi.channel().then(result=>{
                if(result.sourceList==""){
                    //this.myChart=null;
                    $("#myChart").hide()
                    this.shownull=true;
                }else{
                    $("#myChart").show()
                    this.shownull=false;
                }
                this.seriesData=[];
                this.xAxisData=[];
                $.each(result.sourceList,(m,n)=>{
  
                    $.each(n,(i,j)=>{
                         /*this.xAxisData.push(j[1])
                         this.seriesData.push(j[0])*/
                         
                         if(i%2==0){
                            this.seriesData.push(j)
                         }else{
                            this.xAxisData.push(j)
                         }
                    })
                })
                this.myChart.setOption(this.setoptionFN('渠道注册情况',['渠道数量'],this.xAxisData,'渠道数量',this.seriesData))
                
                this.loading=false;
            }).catch(function(error){
                console.error(error)
            })
        },
        drawLine1(){
                if(this.lendTimeStr!=""){

                    if((new Date().getTime())-this.lendTimeStr>2000){
                        this.addApi();
                    }
                }
        },
        //第三个折线的处理函数
        drawLine2(){
            //this.myChart2.setOption(option3)  
            if(this.overduetime!=""){
                    if((new Date().getTime())-this.overduetime>2000){
                        this.overdueSituation()
                    }
            }
        },
        //逾期情况数据函数
        overdueSituation(){
            this.overduetime=new Date().getTime();
            if(this.myChart2){
                this.myChart2.clear();
            }
            //this.myChart.clear();
            this.loadingd=true;
            dashBoardApi.channel()
            .then(result=>{
              
                if(result.overMap.filstList==""&&result.overMap.oversevenList==""&&result.overMap.overthirtyList=="" ){
                    //this.myChart=null;
                    $("#myChart2").hide()
                    this.shownull2=true;
                }else{
                    $("#myChart2").show()
                    this.shownull=false;
                }
                this.filstListArr=result.overMap.filstList;
                this.filstListMsg=[];
                this.filstListDate=[];
                //首逾便利数组
                $.each(this.filstListArr,(m,n)=>{
                    $.each(n,(i,j)=>{
                         if(i%2==0){
                            this.filstListMsg.push(j)
                         }else{
                            this.filstListDate.push(j)
                         }
                    })
                })
                //7天的数组遍历
                this.oversevenList=result.overMap.oversevenList;
                this.fifListMsg=[];
                this.fifListDate=[];
                $.each(this.oversevenList,(m,n)=>{
                    $.each(n,(i,j)=>{
                         if(i%2==0){
                            this.fifListMsg.push(j)
                         }else{
                            this.fifListDate.push(j)
                         }
                    })
                })
                //15天数组遍历
                this.overthirtyList=result.overMap.overthirtyList;
                this.thirtyListMsg=[];
                this.thirtyListDate=[];
                $.each(this.overthirtyList,(m,n)=>{
                    $.each(n,(i,j)=>{
                         if(i%2==0){
                            this.thirtyListMsg.push(j)
                         }else{
                            this.thirtyListDate.push(j)
                         }
                    })
                })
                //this.thirtyListMsg.unshift('0.00')
                let length0=this.filstListDate.length;
                let length1=this.fifListDate.length;
                let length2=this.thirtyListDate.length;
                let Arr=[];
                Arr.push(length0)
                Arr.push(length1)
                Arr.push(length2)
                let index=_.max(Arr);
                switch(Arr.indexOf(index)){
                    case 0:
                    this.secondData=this.filstListDate
                    break;
                    case 1:
                    this.secondData=this.fifListDate
                    break;
                    case 2:
                    this.secondData=this.thirtyListDate
                    break;
                }
                /*this.myChart2.setOption(this.setoptionFN2("逾期情况",["首逾情况","逾期7天情况","逾期15天情况"],this.secondData,"首逾情况",this.filstListMsg,"逾期7天情况",this.fifListMsg,"逾期15天情况",this.thirtyListMsg))*/
                /* this.filstListMsg=[0.1,0.5, 0.5, 0.11, 0.301, 0.45, 0.18, 0.9,0.7, 0.5, 0.21, 0.35]
                this.fifListMsg=[0.1 ,0.5, 0.5, 0.11, 0.301, 0.45, 0.18, 0.9,0.7, 0.5, 0.21, 0.35]
                this.thirtyListMsg=[ 0.18, 0.45, 0.18, 0.11, 0.5, 0.9, 0.7,0.21, 0.35, 0.21, 0.1]

                 
                 this.secondData=['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09', '2018-10','2018-11','2018-12'];*/
                 this.legendData=["首逾情况","逾期7天情况","逾期15天情况"]
                 var serieData = [];
                 var metaDate = [];
                 this.thirtyListMsg.unshift("0.00")
                 metaDate.push(this.filstListMsg)
                 metaDate.push(this.fifListMsg)
                 metaDate.push(this.thirtyListMsg)
                for(var v=0; v < this.legendData.length ; v++){
                    var serie = {
                        name:this.legendData[v],
                        type: 'line',
                       
                        // stack: '数量',
                        data: metaDate[v]
                    };
                    serieData.push(serie)
                }
                this.myChart2.setOption({
                        title: {
                        text: "逾期情况",
                        /* textStyle:{
                            fontSize:'16px',
                        },*/
                        left:'40px',
                        },
                        tooltip: {
                            trigger: 'axis',
                            textStyle:{
                                fontSize:'12px',
                                aligin:'center',
                            },
                            formatter:function(params){  //数据单位格式化  
                               var relVal = params[0].name;  //x轴名称  
                               for (var i = 0, l = params.length; i < l; i++) {    
                                if(params[i].value){

                                    relVal += '<br/> ' + params[i].seriesName + ' : ' + (String(params[i].value)).slice(2,4)+"%";        
                                }
                               }  
                                   
                               return relVal;    
                            }
                        },
                         legend: {
                            data:["首逾情况","逾期7天情况","逾期15天情况"],
                            right:'40px',
                        },
                        grid: {
                            left: '1%',
                            right: '5%',
                            bottom: '8%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data:this.secondData,
                            
                        },
                         yAxis: {
                            type: 'value',
                             axisLabel: {
                                formatter: function (val) {
                                    return val* 100 + '%';
                                }
                            },
                        },
                        series: serieData,
                    })
                this.loadingd=false;
            }).catch(function(error){
                console.error(error)
            })
        }, 
        //头部click函数
        titleInit(){
            if(this.titTime){
                if((new Date().getTime())-this.titTime>1000){
                        this.titApi();
                    }
            }
        },
        //头部数据
        titApi(){
            this.titTime=new Date().getTime();
            this.loadingb=true;
            dashBoardApi.title()
                .then((result)=>{
                    this.titleArr=result;
                   $.each(this.titleArr,(i,j)=>{
                    this.titleArr[i].url=this.imgArr[i];
                   })
                    this.loadingb=false;
                }).catch(function(error){
                    console.error(error)
                })
        },
        //新增复借数据
        addApi(){
            this.lendTimeStr=new Date().getTime()
             if(this.myChart1){
                this.myChart1.clear();
            }
            //this.myChart1.clear();
            this.loadingc=true;
            dashBoardApi.channel()
            .then(result=>{

                if(result.lendMap.newlendList==""&&result.lendMap.oldlendList==""){
                    //this.myChart=null;
                    $("#myChart1").hide()
                    this.shownull1=true;
                }else{
                    $("#myChart1").show()
                    this.shownull1=false;
                }
                this.newlendList=result.lendMap.newlendList;
                this.oldlendList=result.lendMap.oldlendList;
                
                        this.newlendListNum=[];
                        this.newlendListTime=[];
                $.each(this.newlendList,(m,n)=>{
                    $.each(n,(i,j)=>{
                         if(i%2==0){
                            this.newlendListNum.push(j)
                         }else{
                            this.newlendListTime.push(j)
                         }
                    })
                })

                        this.oldlendListNum=[];
                        this.oldlendListTime=[];
                 $.each(this.oldlendList,(m,n)=>{
                    $.each(n,(i,j)=>{
                         if(i%2==0){
                            this.oldlendListNum.push(j)
                         }else{
                            this.oldlendListTime.push(j)
                         }
                    })
                })
                 var lengthOld=this.oldlendListNum.length;
                 var lengthNew=this.newlendListTime.length;
                 if(lengthNew>lengthOld){
                        this.dataTime=this.newlendListTime
                 }else{
                    this.dataTime=this.oldlendListTime
                 }
                 /*this.myChart1.setOption(this.setoptionFN1('新增/复借情况',['新增数量','复借数量'],this.dataTime,'新增数量',this.newlendListNum,'复借数量',this.oldlendListNum))*/
                /*this.newlendListNum=[120, 140, 100, 120, 300, 230, 130, 170,140, 120, 300, 230]
                this.oldlendListNum=[               200, 170, 300, 200, 180,200, 190, 300, 200]
                 this.dataTime=['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09', '2018-10','2018-11','2018-12'];*/
                 this.legendData=['新增数量','复借数量']
                 var serieData = [];
                 var metaDate = [];
                 let legthno=this.newlendListNum.length-this.oldlendListNum.length
                 if(legthno>0){
                    for(var s=0;s<legthno;s++){
                        this.oldlendListNum.unshift("0.00")
                    }
                 }
                 metaDate.push(this.newlendListNum)
                 metaDate.push(this.oldlendListNum)
                for(var v=0; v < this.legendData.length ; v++){
                    var serie = {
                        name:this.legendData[v],
                        type: 'line',
                        //stack: '数量',
                        data: metaDate[v]
                    };
                    serieData.push(serie)
                }
                this.myChart1.setOption({
                        title: {
                        text: '新增/复借情况',
                        /* textStyle:{
                            fontSize:'16px',
                        },*/
                        left:'40px',
                        },
                        tooltip: {
                            trigger: 'axis',
                            textStyle:{
                                fontSize:'12px',
                                aligin:'center',
                            }
                        },
                         legend: {
                            data:['新增数量','复借数量'],
                            right:'40px',
                        },
                        grid: {
                            left: '1%',
                            right: '5%',
                            bottom: '8%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data:this.dataTime 
                        },
                         yAxis: {
                            type: 'value'
                        },
                        series:serieData,
                    })
                this.loadingc=false;
            }).catch(function(error){
                console.error(error)
            })
        },
        setoptionFN(text,legenddata,dataTime,name1,newlendListNum){
            return {
                        title: {
                            text: text,
                        // left:'10px',
                            /* textStyle:{
                                fontSize:'20px',
                            },*/
                            left:'40px',
                        },
                        tooltip: {
                            trigger: 'axis',
                            textStyle:{
                                fontSize:'12px',
                                aligin:'center',
                            }
                        },
                         legend: {
                            data:legenddata,
                            right:'40px',
                        },
                        grid: {
                            left: '1%',
                            right: '5%',
                            bottom: '8%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data:dataTime 
                        },
                         yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:name1,
                                type:'line',
                                stack: '数量',
                                data:newlendListNum
                            }
                        ]
                    }
        },
        
    },
    created(){
         this.titApi();
         this.addApi();
         this.overdueSituation();
    },
}
</script>
<style>

    
</style>
<style lang="scss" scoped>
    #dashborad{
        height:100%;
        overflow-y:scroll;
    }
    .mr10{
        margin-left:10px;
    }
    .mr40{
        width:200px;
        //margin-top:120px;
    }
    .text-line{
        width:200px;
        position:relative;
       left:36%;
       top:38%;
      
    }
    .text-line1{
        left:60%;
        top:30%;
    }
    .text-line2{
        left:40%;
    }
    .fl{
        float: left;
    }
    .dash-top{
    }
    .d-t-float:nth-child(1){
        margin-left:40px;
    }
    .d-t-float{
        // display:inline-block;
        width:221px;
        height:88px;
        min-width:180px;
        margin-left:30px;
        margin-top:60px;
        margin-bottom:10px;
        position:relative;
        background:#ebedf1;
    }
    .dtf-l,.span1{
        margin-top:22px;
    }
    .dtf-l img{
        width:44px;
        height:44px;
        margin:0 20px;
    }
    .span1{
        height:40px;
        color:#333;
        font-size:16px;
        margin-left:6px;
        text-align: center;
        div:nth-child(2){
            margin-top:10px;
        }
    }
    .d-t-float:nth-child(2) .span1{
        margin-left:-7px;
    }
   /*  .main{
       overflow-y:scroll;
   } */
    .main-top{
        height:400px;
        position:relative;
        .main-top-left,.main-top-right{
            float:left;
            height:100%;
            width:49%;
        }
    }
    .main-b{
        margin-top:20px;
        width:98.7%;
        min-height:400px!important;
    }
      @media screen and(max-width: 1600px){ 
     
        /* .el-header, .dash-top{
            width:221px;
        } */
        .d-t-float{
            width:205px!important;
            margin-left:10px;
        }
        .d-t-float:nth-child(2) .span1{
            margin-left:-16px;
        }
    } 
</style>